<template>
  <div class="school_infs">
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(item, i) in form.dataList" :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="item.bg" :icon="item.icon" :icon-size="36">
          <count-to :end="item.value" count-class="count-style"/>
          <p>{{ item.name }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row style="margin-bottom: 20px">
      <Card shadow>
        <div slot="title">报告统计</div>
     <!--   <div  style="width: 50%;height: 300px;margin-top: 30px" id="sex">
        </div>-->
        <div style="width: 100%;height: 300px;" id="kindergartenChart">
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import API from "@/api/api";
  import echart from 'echarts';
  import InforCard from '@/components/info-card/infor-card';
  import CountTo from '@/components/count-to/count-to'

  export default {
    name: "AdminStatics",
    components: {
      InforCard,
      CountTo
    },
    data() {
      return {
        form: {
          dataList: [],
          chartList: [],
          sexList: []
        },
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['平均年龄(age)', '平均体重(kg)', '平均身高(cm)', '平均BMI']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:
            {
              type: 'category',
              data: []
            }
          ,
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: []
        },
        sexOption: {
          title: {
            text: '性别统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男', '女']
          },
          series: {
            name: '性别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        }
      }
    },
    methods: {
      fetchPlatformStatics() {
        API.fetchPlatformStatics().then(resp => {
          this.form = resp.data;
          let chartList = this.form.chartList;
          let ageList = [];
          let weightList = [];
          let heightList = [];
          let bmiList = [];
          for (let i in chartList) {
            ageList.push(chartList[i].data[0]);
            weightList.push(chartList[i].data[1]);
            heightList.push(chartList[i].data[2]);
            bmiList.push(chartList[i].data[3]);
            this.option.xAxis.data.push(chartList[i].kindergartenName);
          }
          this.option.series = [
            {
              name: '平均年龄(age)',
              type: 'bar',
              data: ageList,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              }
            },
            {
              name: '平均体重(kg)',
              type: 'bar',
              data: weightList,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              }
            },
            {
              name: '平均身高(cm)',
              type: 'bar',
              data: heightList,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              }
            },
            {
              name: '平均BMI',
              type: 'bar',
              data: bmiList,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              }
            },
          ];
          let kindergartenChart = echart.init(document.getElementById('kindergartenChart'));
          kindergartenChart.setOption(this.option);
          let sexChart = echart.init(document.getElementById('sex'));
          this.sexOption.series.data = resp.data.sexList;
          sexChart.setOption(this.sexOption);
        })
      }
    },
    created() {
    },
    mounted() {
      this.fetchPlatformStatics();
    }
  }
</script>

<style scoped>

</style>
